<template>
  <div class="home">
    <h1>集采平台接口测试</h1>
    <ul class="button-list">
      <li>
        <router-link to="/VendorPage" class="button-link">供应商查询</router-link>
      </li>
      <li>
        <router-link to="/VendorCreate" class="button-link">供应商创建</router-link>
      </li>
      <li>
        <router-link to="/VendorModify" class="button-link">供应商修改/冻结</router-link>
      </li>
      <li>
        <router-link to="/CustmorPage" class="button-link">客户查询</router-link>
      </li>
      <li>
        <router-link to="/CustmorCreate" class="button-link">客户创建</router-link>
      </li>
      <li>
        <router-link to="/CustmorModify" class="button-link">客户修改/冻结</router-link>
      </li>
      <li>
        <router-link to="/PoCreate" class="button-link">采购订单创建</router-link>
      </li>
      <li>
        <router-link to="/PoModify" class="button-link">采购订单修改</router-link>
      </li>
      <li>
        <router-link to="/PoPost" class="button-link">采购订单过账</router-link>
      </li>
      <li>
        <router-link to="/SoCreate" class="button-link">销售订单创建</router-link>
      </li>
      <li>
        <router-link to="/DNCreate" class="button-link">交货单创建</router-link>
      </li>
      <li>
        <router-link to="/DNPicking" class="button-link">交货单拣配</router-link>
      </li>
      <li>
        <router-link to="/DNPost" class="button-link">交货单过账</router-link>
      </li>
      <li>
        <router-link to="/SoSearch" class="button-link">销售流程查询</router-link>
      </li>
      <li>
        <router-link to="/SoProcess" class="button-link">销售订单流程</router-link>
      </li>
      <!-- 添加更多按钮项以测试布局 -->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center; /* 横向居中对齐 */
  height: 100vh; /* 使内容垂直居中 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 包括边框和内边距在内的宽高计算 */
}

h1 {
  font-size: 2rem; /* 标题字体大小 */
  color: #0895e7; /* 标题颜色 */
  margin-bottom: 20px; /* 标题与按钮列表间距 */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.button-list {
  list-style-type: none; /* 去除列表前的圆点 */
  padding: 0; /* 去除默认内边距 */
  margin: 0; /* 去除默认外边距 */
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 15px; /* 按钮之间的间距 */
  max-width: 960px; /* 最大宽度 */
}

.button-list li {
  flex: 1 1 calc(33.333% - 15px); /* 每列三个按钮 */
  box-sizing: border-box; /* 包括内边距在内的宽高计算 */
  width: 80%;
  height: 62%;
}

.button-link {
  display: block;
  font-size: 1.2rem; /* 链接字体大小 */
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去除下划线 */
  background-color: #e7f0ff; /* 链接背景颜色 */
  padding: 10px 20px; /* 内边距 */
  border-radius: 5px; /* 圆角边框 */
  text-align: center; /* 文本居中 */
  transition: background-color 0.3s ease; /* 胶囊效果过渡 */
}

.button-link:hover {
  background-color: #d0e5ff; /* 鼠标悬停时的背景颜色 */
}
</style>
